<template>
  <div class="border-one-background">
    <!-- 园林建设 -->
    <div>
      <div class="grid-item">
        <div class="title">
          <span>园林建设</span>
        </div>
        <jidu :year="count" />
      </div>
      <div class="form_zps_wrap">
        <div class="from_zps_identification">
          <div class="form_zps_left">年度计划值</div>
          <div>当前月度进度值</div>
        </div>
        <ul class="from_zps_ul">
          <li class="from_zps_li" v-for="item in ylsz_yljs.data" :key="item.title">
            <span class="from_zps_1">{{item.title}}</span>
            <div class="from_zps_2">
              <div class="from_zps_2_1" :style="'width:'+(item.ydjdz/item.ndjhz)*100+'%'"></div>
            </div>
            <countTo
              class="from_zps_3"
              :startVal="0"
              :endVal="item.ydjdz"
              separator
              :duration="2000"
              :decimals="1"
            ></countTo>
            <countTo
              class="from_zps_4"
              :startVal="0"
              :endVal="item.ndjhz"
              separator
              :duration="2000"
            ></countTo>
            <span class="from_zps_5">{{item.dw}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import jidu from "../../components/homePage/quarterSwitch";
export default {
  name: "bottomLeft",
  components: {
    jidu
  },
  data() {
    return {
      count: 0,
      url: "http://10.10.208.6:2020/home/serv",
      ylsz_yljs: {
        data: [
          {
            title: "新增绿道",
            ydjdz: 9999,
            ndjhz: 9999,
            dw: "km",
            liftingNumber: "70%"
          },
          {
            title: "新增绿地",
            ydjdz: 9999,
            ndjhz: 9999,
            dw: "m²",
            liftingNumber: "60%"
          },
          {
            title: "公园绿地",
            ydjdz: 9999,
            ndjhz: 9999,
            dw: "m²",
            liftingNumber: "80%"
          },
          {
            title: "郊野公园",
            ydjdz: 9999,
            ndjhz: 9999,
            dw: "m²",
            liftingNumber: "40%"
          },
          {
            title: "立体绿化",
            ydjdz: 9999,
            ndjhz: 9999,
            dw: "m²",
            liftingNumber: "65%"
          }
        ]
      }
    };
  },
  mounted() {
    this.get_ylsz_yljz();
  },
  methods: {
    get_ylsz_yljz() {
      let _this = this;
      // http://10.10.208.6:2020/home/serv?path=st&groupid=11&year=2020&ismonth=1
      // http://10.10.208.6:2020/home/serv?path=st&groupid=11&year=2&ismonth=0
      let params = { path: "st", groupid: 11, year: 1, ismonth: 0 };
      let params1 = { path: "st", groupid: 11, year: 2, ismonth: 0 };
      _this.http.post(_this.url, params).then(res => {
        console.log("园林建设year1", res);
        let r = res.data;
        let v = _this.ylsz_yljs.data;
        v[0].ydjdz = r.ylsz_yljs_xzlda;
        v[1].ydjdz = r.ylsz_yljs_xzldi;
        v[2].ydjdz = r.ylsz_yljs_gyld;
        v[3].ydjdz = r.ylsz_yljs_jygy;
        v[4].ydjdz = r.ylsz_yljs_ltlh;
      });
      _this.http.post(_this.url, params1).then(res => {
        console.log("园林建设year2", res);
        let r = res.data;
        let v = _this.ylsz_yljs.data;
        v[0].ndjhz = r.ylsz_yljs_xzlda;
        v[1].ndjhz = r.ylsz_yljs_xzldi;
        v[2].ndjhz = r.ylsz_yljs_gyld;
        v[3].ndjhz = r.ylsz_yljs_jygy;
        v[4].ndjhz = r.ylsz_yljs_ltlh;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.border-one-background {
  background: url("../../assets/building/bottom/border-one.png");
  background-size: 99% 98.5%;
  background-repeat: no-repeat;
  margin-left: 0.5rem;
  //   width: 47.77rem;
  //   height: 24.77rem;
  .form_zps_wrap {
    margin-top: 2rem;
  }
  .from_zps_identification {
    height: 1.3rem;
    line-height: 1.3rem;
    color: #bed7fa;
    div {
      // display: inline-block;
      float: right;
      display: flex;
      justify-content: flex-end;
      flex-wrap: nowrap;
      margin-right: 2rem;
    }
    .form_zps_left {
      margin-right: 4rem;
    }
  }
  .from_zps_ul {
    .from_zps_li {
      display: flex;
      height: 3.5rem;
      .from_zps_1 {
        display: inline-block;
        line-height: 3.69rem;
        width: 4.31rem;
        margin-left: 2.31rem;
        font-size: 1.05rem;
        color: #bed7fa;
        font-family: PingFangSC-Regular;
      }
      .from_zps_2 {
        width: 18.46rem;
        height: 0.62rem;
        background: rgba(43, 183, 255, 0.4);
        margin-left: 2rem;
        margin-top: 1.45rem;
        border-radius: 0.5rem;
        transition: width 2s;
        -moz-transition: width 2s; /* Firefox 4 */
        -webkit-transition: width 2s; /* Safari and Chrome */
        -o-transition: width 2s; /* Opera */
        .from_zps_2_1 {
          width: 13.85rem;
          height: 0.62rem;
          border-radius: 0.5rem;
          background: linear-gradient(
            to left,
            rgba(255, 255, 255, 1),
            rgba(43, 183, 255, 0.8)
          );
        }
      }
      .from_zps_3 {
        display: inline-block;
        margin-left: 1rem;
        width: 6rem;
        font-size: 1.8rem;
        font-family: DINAlternate-Bold;
        color: #ffffff;
        letter-spacing: 1px;
        text-align: center;
        line-height: 3.5rem;
        margin-left: 3.5rem;
        text-align: center;
      }
      .from_zps_4 {
        display: inline-block;
        width: 6rem;
        font-family: DINAlternate-Bold;
        font-size: 1.8rem;
        color: #fcb33a;
        letter-spacing: 1px;
        line-height: 3.5rem;
        margin-left: 1.8rem;
        text-align: center;
      }
      .from_zps_5 {
        width: 1.54rem;
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 1.07rem;
        color: #bed7fa;
        letter-spacing: 0;
        line-height: 3.92rem;
      }
    }
  }
}
</style>